<template>
  <div class='block home-single overflow-hidden'>
    <HomeFull/>
    <section class='dynamic-condition'>
      <div class='post-operation'>
        <input type="checkbox" id="toggle-new" class="new-btn hidden">
        <label for="toggle-new" class="part-title toggle-new" role="button" title="查看">
          <span class="me" @click='fetchArticles'>博主</span>
          <span class="fr" @click='getTopList'>置顶</span>
        </label>
      </div>
      <NewPost :list='articles'/>
    </section>
    <FeatureCard :title='"推荐文章"' :feature-list='featuredArticles' />
    <Statistics />
    <MindfulComments />
    <Tens/>
    <Sun></Sun>
  </div>
</template>

<script lang='ts'>
import { computed, defineComponent, onMounted, ref, toRefs, toRef, reactive, onBeforeMount, nextTick } from 'vue'
import { ArticleCard } from '@/components/ArticleCard'
import { useAppStore } from '@/stores/app'
import { useUserStore } from '@/stores/user'
import { useArticleStore } from '@/stores/article'
import { useCategoryStore } from '@/stores/Category'
import { useI18n } from 'vue-i18n'
import Paginator from '@/components/Paginator.vue'
import api from '@/api/api'
import markdownToHtml from '@/utils/markdown'
import SvgIcon from '@/components/SvgIcon/index.vue'
import ObSkeleton from '@/components/LoadingSkeleton/src/Skeleton.vue'
import FeatureCard from '@/components/Feature/src/FeatureCard.vue'
import Statistics from '@/components/HomeComponents/Statistics.vue'
import MindfulComments from '@/components/HomeComponents/MindfulComments.vue'
import Sun from '@/components/HomeComponents/Sun.vue'
import NewPost from '@/components/kit/NewPost/index.vue'
import HomeFull from '@/components/HomeComponents/HomeFull.vue'
import Tens from '@/components/HomeComponents/Tens.vue'
import { setDocumentTitle } from '@/utils/commonUtil'
import { Site } from '@/config/config'
export default defineComponent({
  name: 'Home',
  components: {
    Tens,
    HomeFull,
    Sun,
    MindfulComments,
    Statistics,
    FeatureCard,
    ObSkeleton,
    SvgIcon,
    ArticleCard,
    Paginator,
    NewPost
  },
  setup() {
    const appStore = useAppStore()
    const userStore = useUserStore()
    const articleStore = useArticleStore()
    const categoryStore = useCategoryStore()
    const { t } = useI18n()
    const activeTab = ref(0)
    const pagination = reactive({
      size: 9,
      total: 0,
      current: 1
    })
    const reactiveData = reactive({
      title: '' as any
    })
    let nowCategoryId = 0
    onMounted(() => {
      fetchTopAndFeatured()
      reactiveData.title=computed(()=>{
        return appStore.websiteConfig.name
      })
    })
    onBeforeMount(()=>{
      fetchArticles()
    })
    const getTopList = () => {
      api.getTopArticleList().then(({ data }) =>{
        articleStore.articles=data.data
      })
    }
    const fetchTopAndFeatured = () => {
      api.getTopAndFeaturedArticles().then(({ data }) => {
        data.data.topArticle.articleContent = data.data.topArticle.articleAbstract
        data.data.featuredArticles.forEach((item: any) => {
          item.articleContent =item.articleAbstract
        })
        articleStore.topArticle=data.data.topArticle
        articleStore.featuredArticles = data.data.featuredArticles
      })
    }
    const fetchArticles = () => {
      activeTab.value = userStore.tab
      nowCategoryId = userStore.tab
      pagination.current = userStore.page
      api.getArticles({
        current: pagination.current,
        size: pagination.size
      }).then(({ data }) => {
        if (data.flag) {
          data.data.records.forEach((item: any) => {
            item.articleContent = markdownToHtml(item.articleAbstract)
              .replace(/<\/?[^>]*>/g, '')
              .replace(/[|]*\n/, '')
              .replace(/&npsp;/gi, '')
          })
          articleStore.articles = data.data.records
          pagination.total = data.data.count
        }
      })
    }
    const pageChangeHanlder = (current: number) => {
      userStore.page = current
      pagination.current = current
      fetchArticles()
    }
    return {
      ...toRefs(articleStore.$state),
      ...toRefs(reactiveData),
      categories: toRef(categoryStore.$state, 'categories'),
      themeConfig: computed(() => appStore.themeConfig),
      activeTab,
      pagination,
      pageChangeHanlder,
      t,
      featuredArticles: toRef(articleStore.$state, 'featuredArticles'),
      getTopList,
      fetchArticles
    }
  },
  watch:{
    title:function() {
      nextTick(()=>{
        setDocumentTitle(this.title + " | " + Site.slogan)
      })
    }
  }
})
</script>
<style lang='scss'>
.home-article {
  .article-content {
    p {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .article-footer {
      margin-top: 13px;
    }
  }
}
</style>
